/*
 * @Author: Wxx
 * @Date: 2022-02-22 16:15:49
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-22 16:27:54
 * @Description:
 */
import { useRef, useState } from "react";

/**
 * useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。
 * 返回的 ref 对象在组件的整个生命周期内保持不变。
 * useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。
 */

export default function TextInputWithFocusButton() {
  const [count, setCount] = useState(0);

  const inputEl = useRef(null);
  var myCount = useRef(0);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
      <div>
        myName-{count} 点击click次数 {myCount.current}
      </div>
      <button
        onClick={() => {
          setCount(count + 1);
          myCount.current++;
        }}
      >
        click
      </button>
    </div>
  );
}
